<script lang="ts" setup>
  import { useUserStore } from '/@/store/modules/user'
  import { ossUrl } from '~/src/config'
  const userStore = useUserStore()
  const { avatar, username } = storeToRefs(userStore)

  const userInfo: any = localStorage.getItem('userInfo')
  const _userInfo = JSON.parse(userInfo)

  const description = ref('')

  const handleTips = () => {
    const hour = new Date().getHours()
    return hour < 8
      ? `早上好 ${_userInfo.name}，又是元气满满的一天。`
      : hour <= 11
      ? `上午好 ${_userInfo.name}，看到你我好开心。`
      : hour <= 13
      ? `中午好 ${_userInfo.name}，忙碌了一上午，记得吃午饭哦。`
      : hour < 18
      ? `下午好 ${_userInfo.name}，你一定有些累了，喝杯咖啡提提神。`
      : `晚上好 ${_userInfo.name}，愿你天黑有灯，下雨有伞。`
  }
  // const fetchData = async () => {
  //   const { data } = await getList()
  //   description.value = data.description //正式项目换用正式接口
  //   description.value = '欢迎登录，DMS客户系统'
  // }
  description.value = '欢迎登录，DMS客户系统'

  onMounted(() => {})

  const colorFrom = ref('var(--el-color-primary-light-9)')
  const colorTo = ref('var(--el-color-white)')
  const style = {
    background: `${colorTo.value} linear-gradient(120deg, ${colorFrom.value} 10%, ${colorTo.value}) no-repeat`,
  }
</script>

<template>
  <vab-colorful-card class="page-header" shadow="never" :style="style">
    <el-avatar
      class="page-header-avatar hidden-xs-only"
      :src="`${ossUrl}/web/images/logo/company_logo.png`"
    />
    <div class="page-header-tip">
      <p class="page-header-tip-title">
        {{ handleTips() }}
      </p>
      <p class="page-header-tip-description" v-html="description"></p>
    </div>
  </vab-colorful-card>
</template>

<style lang="scss" scoped>
  .page-header {
    transition: none;

    :deep() {
      * {
        transition: none;
      }

      .el-card__header {
        display: none;
      }

      .el-card__body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .page-header-avatar img {
        transform: scale(0.2);
      }
    }

    &-avatar {
      width: 60px;
      height: 60px;
      padding: 12px;
      margin-right: 20px;
      border-radius: 50%;
    }

    &-tip {
      flex: auto;
      width: calc(100% - 200px);
      min-width: 300px;

      &-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: bold;
        color: #3c4a54;
      }

      &-description {
        min-height: 20px;
        font-size: var(--el-font-size-default);
        color: #808695;
      }
    }
  }
</style>
